<template>
	<view class="orderItem">
		<view class="order_info_top_box">
			<view class="order_sn">
				<view v-show="itemData.get_status!=0">
					<span class="mar-right-10">订单编号</span>
					<span>{{ itemData.order_id }}</span>
				</view>
			</view>
			<view class="order_status">
				<span v-if="itemData.get_status==0">待领取</span>
				<span>{{ statusType[itemData.order_info.status] }}</span>
			</view>
		</view>
		<view class="order_info_center_box">
			<view class="order_goods_img">
				<image :src="itemData.goods_info.cover" mode=""></image>
			</view>
			<view class="order_info_details">
				<view class="order_goods_item_name more-text2">{{ itemData.goods_info.product_name }}</view>
				<view class="order_goods_num">
					<view class="fn-sz-28 fn-cl-666666 mar-right-54">数量: X{{ itemData.goods_info.num }}</view>
				</view>
			</view>
		</view>
		<view class="order_bottom_btn_box">
			<view class="parmary_btn" v-show="itemData.status == 'done' || itemData.status == 'cancel'"><button
					@tap="delOrderShow = true">删除订单</button>
			</view>
			<view class="parmary_btn" v-show="itemData.status == 'unpay'"><button
					@tap="cancelOrderShow = true">取消订单</button></view>
			<view class="pay_btn" v-show="itemData.status == 'unpay'"><button @tap="payNow">立即付款</button></view>
			<view class="pay_btn" v-show="itemData.order_info.status=='payed'"><button @tap="checkCode">查看核销码</button>
			</view>
			<view class="pay_btn" v-show="itemData.order_info.status == 'wait_comment'"><button
					@tap="commentNow">立即评价</button>
			</view>
			<view class="pay_btn" v-show="itemData.get_status == 0"><button @tap="chooseAddress">选择配送地址</button>
			</view>
		</view>
		<ratePopup @successSubmitRate="successSubmitRate" :orderInfo="itemData" ref="ratePopup" orderType="prizeTour">
		</ratePopup>
		<u-popup :show="codeShow" mode="center" @close="closeCode" :round="12">
			<view class="code_show_box">
				<view class="close_code_btn" @tap="closeCode">
					<image src="../../static/images/icon/icon_gary_radios_fill.png" mode=""></image>
				</view>
				<view class="code_times" v-if="itemData.order_info.type==2">
					<span class="mar-right-10">剩余次数：</span>{{itemData.order_info.times-itemData.order_info.used_times}}次
				</view>
				<view class="code_times" v-if="itemData.order_info.type==3">
					<span class="mar-right-10">有效期至：</span>{{itemData.order_info.expire_time}}
				</view>
				<view class="code_img_box">
					<image :src="codeImg" mode=""></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ratePopup from '../ratePopup/ratePopup.vue';
	import afterSalePopup from '../afterSalePopup/afterSalePopup.vue';
	export default {
		name: 'tourOrderItem',
		components: {
			ratePopup,
			afterSalePopup
		},
		props: {
			isGrouper: {
				type: Boolean,
				default: false
			},
			itemData: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				cancelOrderShow: false,
				comfirmGetShow: false,
				delOrderShow: false,
				codeShow: false,
				statusType: {
					unpay: '待付款',
					payed: '待使用',
					deliver: '配送中',
					wait_comment: '待评价',
					done: '已完成',
					sale_service: '售后',
					cancel: '已取消'
				},
				codeImg: ''
			};
		},
		methods: {
			goDetails() {
				uni.navigateTo({
					url: `/pages/order/tourDetails?order_id=${this.itemData.id}`
				});
			},
			payNow() {
				uni.navigateTo({
					url: `/pages/orderPay/tourOrderPay?order_id=${this.itemData.id}`
				});
			},
			confirmCancel() {
				this.$api.cancelTourDeliver({
					order_id: this.itemData.id
				}).then(res => {
					this.$helper.toast(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							this.$emit('changeOrderStatus');
						}, 300);
					}
				});
			},
			confirmDel() {
				this.$api.delTourDeliver({
					order_id: this.itemData.id
				}).then(res => {
					this.$helper.toast(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							this.$emit('changeOrderStatus');
						}, 300);
					}
				});
			},
			//现在评价
			commentNow() {
				this.$refs.ratePopup.ratePopupShow = true;
			},

			//评价成功回调
			successSubmitRate() {
				setTimeout(() => {
					this.$emit('changeOrderStatus');
				}, 300);
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.itemData.deliver_phone
				});
			},
			//查看二维码
			checkCode() {
				this.$api.getCheckStr({
					order_id: this.itemData.order_id
				}).then(res => {
					if (res.code == 1) {
						this.codeImg = res.data.img;
						this.codeShow = true;
					} else {
						this.$helper.toast(res.msg);
					}
				})
			},
			//关闭二维码模态框
			closeCode() {
				this.codeShow = false;
			},
			chooseAddress() {
				uni.navigateTo({
					url: `/pages/integralShop/intergralAddress?record_id=${this.itemData.record_id}&pageType=order`
				})
			},
		}
	};
</script>

<style lang="scss">
	.orderItem {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 32rpx 24rpx;

		.order_info_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 28rpx;
			border-bottom: 1rpx dashed #cccccc;

			.order_sn {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}

			.order_status {
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}
		}

		.order_info_center_box {
			display: flex;
			// align-items: center;
			padding: 29rpx 0;
			border-bottom: 1rpx dashed #cccccc;

			.order_goods_img {
				flex: none;
				margin-right: 23rpx;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
			}

			.order_info_details {
				flex: 1;

				.order_goods_item_name {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					margin-bottom: 20rpx;
					padding-top: 6rpx;
					height: 86rpx;
				}

				.order_goods_num {
					.order_goods_num_bottom_box {
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						button {
							width: 150rpx;
							height: 58rpx;
							font-size: 24rpx;
							line-height: 58rpx;
							border-radius: 33rpx;
							padding: 0;
						}
					}
				}
			}
		}

		.order_bottom_btn_box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-top: 24rpx;

			view {
				margin-right: 20rpx;

				button {
					width: 150rpx;
					height: 58rpx;
					font-size: 24rpx;
					line-height: 58rpx;
					border-radius: 33rpx;
					padding: 0;
				}

				&:nth-last-child(1) {
					margin-right: 0rpx;
				}
			}
		}

		.parmary_btn {
			button {
				color: #222222;
				text-align: center;
				background: #ffffff;
				border-radius: 33rpx;
				border: 1rpx solid #cccccc;
			}
		}

		.pay_btn {
			button {
				width: 200rpx !important;
				color: #222222;
				text-align: center;
				background-color: #fed100;
			}
		}
	}

	.code_show_box {
		box-sizing: border-box;
		padding: 80rpx 140rpx 140rpx;
		position: relative;
		border-radius: 80rpx;

		.close_code_btn {
			width: 45rpx;
			height: 45rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.code_times {
			text-align: center;
			margin-bottom: 30rpx;
			font-size: 26rpx;
			color: red;
		}

		.code_img_box {
			width: 400rpx;
			height: 400rpx;
			background-color: #222222;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>